<template>
  <div class="friends-page-root">

    <div class="card-box">
      <div v-if="!showChatTab">
        <div class="search-user-box">
          <input v-model="searchKeyword" placeholder="输入用户名或昵称搜索" class="search-input" />
          <button class="search-btn" @click="searchUser">搜索</button>
        </div>
        <ul v-if="searchResults.length" class="search-list">
          <li v-for="user in searchResults" :key="user.id" class="search-item">
            <img :src="user.avatar" class="avatar" />
            <span class="nickname">{{ user.nickname }}</span>
            <button
              v-if="!isFriend(user.id)"
              class="add-btn"
              @click="sendFriendRequest(user.id)"
            >加好友</button>
            <span v-else class="already-friend">已是好友</span>
          </li>
        </ul>
        <ul v-else>
          <li v-for="friend in friends" :key="friend.id" class="friend-item">
            <img :src="friend.avatar" class="avatar" />
            <span class="nickname">{{ friend.nickname }}</span>
            <button class="chat-btn" @click="goChat(friend)">聊天</button>
          </li>
        </ul>
      </div>
      <div v-else>
        <ChatTab :initFriend="currentFriend" @back="showChatTab = false" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ChatTab from './ChatTab.vue'
export default {
  components: { ChatTab },
  data() {
    return {
      friends: [],
      searchKeyword: '',
      searchResults: [],
      showChatTab: false,
      currentFriend: null
    }
  },
  created() {
    this.loadFriends()
  },
  methods: {
    async loadFriends() {
      const userId = localStorage.getItem('userId')
      try {
        const res = await axios.get('/api/friend/list', { params: { userId } })
        this.friends = res.data
      } catch (e) {
        this.friends = []
      }
    },
    async searchUser() {
      if (!this.searchKeyword.trim()) {
        this.searchResults = []
        return
      }
      try {
        const res = await axios.get('/api/user/search', { params: { keyword: this.searchKeyword } })
        this.searchResults = res.data
      } catch (e) {
        this.searchResults = []
      }
    },
    isFriend(userId) {
      return this.friends.some(f => f.id === userId)
    },
    async sendFriendRequest(friendId) {
      const userId = localStorage.getItem('userId')
      try {
        const res = await axios.post('/api/friend/request', {
          userId: Number(userId),
          friendId: Number(friendId)
        })
        this.$message.success(res.data.message || '好友请求已发送')
      } catch (e) {
        this.$message.error(e.response?.data?.message || '发送失败')
      }
    },
    openChatTab(friend) {
      this.currentFriend = friend
      this.showChatTab = true
    },
    goChat(friend) {
      this.$router.push({ path: '/chat', query: { friendId: friend.id } })
    }
  }
}
</script>
<style scoped>
.friends-page-root {
  min-height: 100vh;
  background: #f3f4f6;
  padding: 32px 0;
}

.btn-group {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 24px auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.nav-btn {
  flex: 1;
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.nav-btn:hover {
  background: #13ce66;
}

.card-box {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  min-height: 400px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-user-box {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
  background: #f7f7f7;
}

.search-btn {
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.search-btn:hover {
  background: #13ce66;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.friend-item, .search-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-right: 18px;
  background: #f5f5f5;
  object-fit: cover;
}

.nickname {
  flex: 1;
  font-size: 18px;
  color: #222;
}

.chat-btn, .add-btn {
  background: #07c160;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-btn:hover, .add-btn:hover {
  background: #13ce66;
}

.already-friend {
  color: #aaa;
  margin-left: 8px;
  font-size: 15px;
}

@media (max-width: 700px) {
  .btn-group, .card-box {
    max-width: 98vw;
    width: 98vw;
    padding: 8px;
  }
  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
  .nickname {
    font-size: 15px;
  }
  .chat-btn, .add-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}
</style>
